<!-- 问卷回顾 -->
<template>
	<div class="box">
		<AnimationCom description="根据调研问卷结果按设备设施专业、空间分析风险管理职责范围及其管理偏好" :dataList="dataList">
			<template #content>
				<Content class="content"></Content>
			</template>
			<template v-for="item in dataList" :key="item.majorCode" v-slot:[`statistics${item.majorCode}`]="{ itemData }">
				<div class="title-des">
					<div>{{ itemData.majorName }}</div>
					<div>
						<span>涉及<span class="blue"> {{ itemData.questionCount }} </span>个问卷问题</span>
						<span class="include">
							涵盖
							<span class="red"> {{ itemData.riskEventCount }} </span>个风险事件，
						</span>
						<span><span class="red">{{ itemData.focusRiskEventCount }} </span>个重点关注风险</span>
					</div>
				</div>
			</template>
		</AnimationCom>
		<AnimationCom description="根据风险范围，制定的尽职调查项" :dataList="dataList">
			<template #content>
				<Content1 class="content"></Content1>
			</template>
			<template v-for="item in dataList" :key="item.majorCode" v-slot:[`statistics${item.majorCode}`]="{ itemData }">
				<div class="title-des">
					<div>{{ itemData.majorName }}</div>
					<div>
						<span>尽调项<span class="blue"> {{ itemData.questionCount }} </span>个</span>
						<span class="include">
							有影响的尽调项
							<span class="red"> {{ itemData.riskEventCount }} </span>个，
						</span>
						<span><span class="red">配合工时{{ itemData.focusRiskEventCount }} </span>分钟</span>
					</div>
				</div>
			</template>
		</AnimationCom>
	</div>
</template>

<script setup>
import AnimationCom from "./AnimationCom/index.vue";
import Content from "./Content.vue";
import Content1 from "./Content1.vue";
import { ref } from "vue";
const dataList = ref([
	{
		majorCode: "sdfsd",
		majorName: "强电专业",
		questionCount: 32,
		riskEventCount: 10,
		focusRiskEventCount: 20,
	},
	{
		majorCode: "gfhfgh",
		majorName: "空调专业",
		questionCount: 32,
		riskEventCount: 10,
		focusRiskEventCount: 20,
	},
]);
</script>
<style lang="less" scoped>
.box {
	width: 100%;
	height: 100%;
}

.title-des {
	&>div:first-child {
		margin-bottom: 12px;
		font-weight: 700;
		font-size: 26px;
	}

	&>div:last-child {
		font-size: 16px;
		color: var(--grey-700);

		.include {
			margin-left: 40px;
		}

		.blue,
		.red {
			font-family: "CustomRegular";
			font-weight: bold;
			font-size: 18px;
		}

		.blue {
			color: var(--blue-500);
		}

		.red {
			color: #f54f47;
		}
	}
}
</style>
